<template>
  <div>
    {{msg}}<br/>
        <p>{{ total }}</p>
        <button-counter v-on:increment="incrementTotal"></button-counter>
        <button-counter v-on:increment="incrementTotal"></button-counter><!--     v-on:increment 子组件触发事件   incrementTotal 父组件调用的方法 -->
  </div>
</template>

<script>

import Vue from 'vue';

Vue.component('button-counter', {
  template: '<button v-on:click="incrementHandler">{{ counter }}</button>',
  data: function () {
    return {
      counter: 0
    }
  },
  methods: {
    incrementHandler: function () {
      this.counter += 1
      this.$emit('increment')   //通过this.$emit('事件名')触发自定义事件（向父组件 “发通知”，事件名为increment
    }
  },
})


export default{
    name:"DiyEvent",
    data(){
      return {
        msg:"DiyEvent",
         total: 0
      }
    },
   methods: {
      incrementTotal() {
          this.total += 1
        }
   },

}
</script>

<style>
</style>

/***
实际运行效果
当你在页面中打开这个组件时，会看到以下交互：
初始界面：显示文本DiyEvent，下方有一个显示0的<p>标签，再下方有两个显示0的按钮。
点击第一个按钮：
第一个按钮的数字从0变成1（子组件自身counter更新）；
父组件total从0变成1（<p>标签显示1）。
再点击第二个按钮：
第二个按钮的数字从0变成1（子组件自身counter更新）；
父组件total从1变成2（<p>标签显示2）。
继续点击任意按钮：
对应按钮的数字会持续递增（各自的counter独立）；
总计数total会每次加 1（所有按钮的点击次数累加）。

Vue 中父子组件不能直接访问对方的数据（数据隔离），因此需要通过「子组件触发事件 → 父组件监听事件并响应」的方式实现通信。整个计数逻辑的流转分为 3 步：
1. 子组件：button-counter的职责
子组件只管理自己的 “局部数据”（按钮自身的计数），并在用户操作时「向外发送事件通知」。
核心部分	代码解析
模板	<button v-on:click="incrementHandler">{{ counter }}</button>
- 按钮绑定click事件，触发incrementHandler方法；
- 按钮显示自身的计数counter。
数据（data）	data: function () { return { counter: 0 } }
- 子组件的局部数据（每个button-counter实例都有独立的counter）；
- 注意：组件的data必须是函数（避免多个实例共享同一数据）。
方法（methods）	incrementHandler: function () { this.counter += 1; this.$emit('increment') }
- 第一步：自身计数counter加 1（按钮显示的数字会更新）；
- 第二步：通过this.$emit('事件名')触发自定义事件（向父组件 “发通知”，事件名为increment）。
2. 父组件：DiyEvent的职责
父组件管理 “总计数”total，并监听子组件发送的自定义事件，在事件触发时更新总计数。
核心部分	代码解析
数据（data）	return { msg: "DiyEvent", total: 0 }
- msg：简单的文本展示；
- total：所有子组件的 “总计数”（初始为 0）。
监听子组件事件	<button-counter v-on:increment="incrementTotal"></button-counter>
- v-on:increment：监听子组件触发的increment自定义事件（可简写为@increment）；
- 事件触发时，执行父组件的incrementTotal方法。
方法（methods）	incrementTotal() { this.total += 1 }
- 子组件每触发一次increment事件，父组件的total就加 1；
- 由于两个子组件都绑定了这个事件，点击任意一个按钮，total都会更新（页面中<p>{{ total }}</p>会实时显示最新总计数）。


四、关键知识点总结（划重点）
组件数据隔离：子组件的counter和父组件的total是独立的，子组件不能直接修改父组件的total，必须通过事件通知。
自定义事件通信：父子组件通信的核心方式之一（子$emit触发事件，父v-on监听事件），适用于 “子组件向父组件传递信息” 的场景。
组件data的特殊性：组件的data必须是函数，确保每个组件实例拥有独立的数据（如果用对象，多个实例会共享数据，导致点击一个按钮所有按钮都变）。
事件简写：v-on:increment可简写为@increment（实际开发中更常用简写）。

***/
